<template>
  <div class="box">
    <div class="top">
      <top-nav v-if="index == 0 || index == 1" @fanhui="fanhui"></top-nav>
      <top-nav-3 v-if="index == 4 || index == 5 || index == 6">{{
        index == 4
          ? "商品列表"
          : "" || index == 5
          ? "收货地址"
          : "" || index == 6
          ? "订单填写"
          : ""
      }}</top-nav-3>
    </div>
    <div
      class="main"
      :style="index == 3 ? { 'margin-top': '0', 'margin-bottom': '55px' } : {}"
    >
      <router-view @ok="ok1" ref="main" @fanhui="fanhui"></router-view>
    </div>
    <div class="bottom" v-if="noneNav">
      <bottom-nav @chai="bottomIndex"></bottom-nav>
    </div>
    <jia-zai v-if="jiazaizhong"></jia-zai>
  </div>
</template>

<script>
//底部导航
import bottomNav from "./components/bottomNav.vue";
import topNav from "./components/topNav.vue";
import topNav2 from "./components/topNav2.vue";
import topNav3 from "./components/topNav3.vue";
import jiaZai from "./components/jiaZai.vue";
import "@/plugins/axios";
export default {
  components: { bottomNav, topNav, topNav2, topNav3, jiaZai },
  data() {
    return {
      //底部路由链接
      navPath: ["shouye", "branch", "cat", "my"],
      noneNav: true, //是否隐藏导航
      index: 0,
      jiazaizhong: false,
    };
  },
  methods: {
    //跳转页面
    bottomIndex(res) {
      if (this.index == res) return;
      this.jiazaizhong = true;
      setTimeout(() => {
        this.index = res;
        this.$router
          .push({
            name: this.navPath[res],
            query: { index: res },
          })
          .catch((err) => {
            return err;
          });
        this.jiazaizhong = false;
      }, 1000);
    },
    //登录后跳转
    ok1(res) {
      if (res == 1) {
        this.bottomIndex(0);
      }
    },
    //返回来
    fanhui(res) {
      this.index = res;
      if (res == 5) {
        this.noneNav = false;
      } else {
        this.noneNav = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  display: flex;
  flex-direction: column;
}
.top {
  width: 100%;
}
.bottom {
  width: 100%;
  height: 0.5rem;
  background: white;
  position: fixed;
  bottom: 0;
}
.main {
  flex: 1;
}
</style>
